<template  >
    <div class='list' ref='lists' style="position:relative" data-html2canvas-ignore='true'>
        <div v-if="isDevOps=='Y'&&devSet!='Y'" class="list_dev">
            <commonList  @countJson="countJson" style="flex:1" ref="commonList" @loadBtn="loadBtn" @loadDatad="loadDatad" :exId="exId" :isApp="isApp" :sKey="sKey" :sKey2="sKey2" :company="company" :searchs="searchs" :isTitle="isTitle" listnames='' :appid="appid"  :model_key="key" @goSearch="goSearch"  @rowDbClick="rowDbClick" :model="model" :isPost="isPost" :isSearch="isSearchs"></commonList>
            <list-dev style="flex:1;overflow:hidden;" :company="company" :filepath="filepath" :isDevOps="isDevOps" v-if="isDevOpsShow=='Y'&&devOpsSet=='list'" @loadData="devLoadData"></list-dev>  
            <edit-dev style="flex:1;overflow:hidden;" :company="company" :buttonJson="buttonJson" :isDevOps="isDevOps" v-if="isDevOpsShow=='Y'&&devOpsSet=='edit'" @loadData="devLoadData"></edit-dev>  
       
        </div>
        <template v-else>
            <commonList  @countJson="countJson" ref="commonList" @loadDatad="loadDatad" :exId="exId" :isApp="isApp" :sKey="sKey" :sKey2="sKey2" :company="company" :searchs="searchs" :isTitle="isTitle" listnames='' :appid="appid"  :model_key="key" @goSearch="goSearch"  @rowDbClick="rowDbClick" :model="model" :isPost="isPost" :isSearch="isSearchs"></commonList>
         
        </template>
        <el-dialog
               
            :title="commonEditData.title"
            :modal="false"
            
            class="dialogClass dialog-vertical"
            style='left:0;top:0'
            center
            :visible.sync="dialogVisible3"
            >
            <common-edit :commonEditData="commonEditData"   @closeWin="closeWins" @goSearch="goSearch" v-if="dialogVisible3"></common-edit>
            
        </el-dialog>
        <el-button type="primary" v-if="devSet=='Y'" style="position:absolute;right:0;bottom:0" @click="dialogVisible4=true">界面设置</el-button>
        <el-button-group  style="position:absolute;left:0;bottom:0" v-if="isDevOps=='Y'">
            <el-button type="primary" @click="devOpsSet='list'" >列表界面</el-button>
            <el-button type="primary"  @click="devOpsSet='edit'">按钮</el-button>
            <el-button type="primary"  @click="devOpsSet=''">关闭</el-button>
        </el-button-group>
        <el-dialog
               
            title="界面设置"
            
            class="dialogClass dialog-vertical"
            style='left:0;top:0'
            center
            :visible.sync="dialogVisible4"
            >
            <list-dev style="flex:1;overflow:hidden;width:100%;height:100%" :company="company" :filepath="filepath" :isDevOps="isDevOps" v-if="isDevOpsShow=='Y'" @loadData="devLoadData"></list-dev>  
        
            
        </el-dialog>
    </div>
</template>
<script>
import Vue  from 'vue'
import commonList  from '../components/list/commonList.vue'
import ListDev  from '../components/dev/listDev.vue'
import EditDev  from '../components/dev/editDev.vue'
import CommonEdit  from './CommonEdit.vue'
export default {
    name:'list',
    props:["commonListData","isSearch","devSet"],
    components: {
        commonList,
        CommonEdit,
        ListDev,
        EditDev
    },
    data(){
        return{
            buttonJson:[],
            devOpsSet:"list",
            filepath:"",
            isDevOps:"N",
            isDevOpsShow:"N",
            isSearchs:"N",
            commonEditData:{
                fieldPath:"",
                filename2:"",
                sId:"",
                ids:"",
                param_key:"",
                appid:"",
                title:"",
                params:{}
            },
            isApp:"N",
            dialogVisible3:false,
            dialogVisible4:false,
            sKey:'',
            sKey2:'',
            company:'',
            searchs:'',//搜索参数，json对象格式
            appid:'',
            key:"",
            title:"",
            isTitle:"",
            dbModelkey:"",
            model:"",
            exId:"",
            isPost:""
        }
    },
    created(){
        if(sessionStorage.getItem("isDevOps")=="Y"){
            this.isDevOps="Y"
        }
        if(this.isSearch){
            this.isSearchs=this.isSearch;
        }
        if(this.$route.query.sKey){
            this.sKey=this.$route.query.sKey;
        }
       
        if(this.$route.query.token){
            sessionStorage.setItem("token",this.$route.query.token)
            
        }
        if(this.$route.query.ismobile){
            localStorage.setItem("ismobile",this.$route.query.ismobile)
            
        }
        
       // alert(this.$route.query.token+"=="+this.$route.query.filename2);
        if(this.$route.query.isPost){
            this.isPost=this.$route.query.isPost;
        }
        if(this.$route.query.sKey2){
            this.sKey2=this.$route.query.sKey2;
        } 
        if(this.$route.query.exId){
            this.exId=this.$route.query.exId;
        } 
        if(this.$route.query.company){
            this.company=this.$route.query.company;
        }
        if(this.$route.query.searchs){
            this.searchs=this.$route.query.searchs;
        }
        if(this.$route.query.isApp){
            this.isApp=this.$route.query.isApp;
        }
        if(this.$route.query.appid){
            this.appid=this.$route.query.appid;
        }
       
        if(this.$route.query.title){
            this.title=this.$route.query.title;
        }
        if(this.$route.query.model){
            this.model=this.$route.query.model;
        }
        
         if(this.$route.query.dbModelkey){
            this.dbModelkey=this.$route.query.dbModelkey;
        }
        if(this.$route.query.key){
            this.key=this.$route.query.key;
        }
        if(this.commonListData){
            
            if(this.commonListData.sKey){
                this.sKey=this.commonListData.sKey;
            }
            if(this.commonListData.sKey2){
                this.sKey2=this.commonListData.sKey2;
            } 
            if(this.commonListData.exId){
                this.exId=this.commonListData.exId;
            } 
            if(this.commonListData.company){
                this.company=this.commonListData.company;
            }
            if(this.commonListData.searchs){
                this.searchs=this.commonListData.searchs;
            }
            if(this.commonListData.isApp){
                this.isApp=this.commonListData.isApp;
            }
            if(this.commonListData.appid){
                this.appid=this.commonListData.appid;
            }
            if(this.commonListData.title){
                this.title=this.commonListData.title;
            }
            if(this.commonListData.model){
                this.model=this.commonListData.model;
            }
            
            if(this.commonListData.dbModelkey){
                this.dbModelkey=this.commonListData.dbModelkey;
            }
            if(this.commonListData.key){
                this.key=this.commonListData.key;
            }
        }
        let sef=this;
        /* window.addEventListener('message', function(messageEvent) {
             var data = messageEvent.data;
             let item=JSON.parse(data);
             if(item.type=='goSearch')
                sef.goSearch();
       
        },false);*/
    },
    methods:{
        loadDatad(data){
            this.filepath=data;
            if(sessionStorage.getItem("isDevOps")=="Y")
                this.isDevOpsShow="Y"
        },
        loadBtn(data){
            this.buttonJson=JSON.parse(data)
        },
        devLoadData(data){
            this.$refs.commonList.loadData("Y");
        },
        openWin(data){
            
            if(this.isApp!="Y"){
                let datas=JSON.parse(data);
                let wb_msg=datas.wb_msg;
                
                // parent.postMessage(data,'*');
                //parent.openWin(datas)
                this.$emit("openWin",data)
            }else{
                let item=JSON.parse(data);
                this.dialogVisible3=true;
            
                this.commonEditData={
                    fieldPath:"",
                    filename2:"",
                    sId:"",
                    param_key:"",
                    params:{},
                    appid:"",
                    title:"",
                    paramVals:""
                };
                
                this.commonEditData.fieldPath=item.fieldPath;
                this.commonEditData.filename2=item.filename2;
                this.commonEditData.appid=item.appid;
                this.commonEditData.param_key=item.param_key;
                this.commonEditData.title=item.buttonName;
                this.commonEditData.paramVals=item.paramVals;
                this.commonEditData.sId=item.sId;
                this.commonEditData.pId=item.pId;
                if(item.ids)
                    this.commonEditData.ids=item.ids;
                this.commonEditData.exData=item.exData;
                this.commonEditData.params=item.params;
                this.commonEditData.exId=item.exId;//列表里传的主键（就是列表里套列表）
                if(item.paramVals)
                    this.commonEditData.paramVals=item.paramVals;

                let els=document.getElementsByClassName("el-dialog");
                for(let i=0;i<els.length;i++){
                    els[i].style.left="0";
                    els[i].style.top="0"
                }
            }
            
        },
        closeWins(datas){
            this.dialogVisible3=false;
        },
        goSearch(){
            console.log(this.$refs.commonList)
            this.$refs.commonList.goSearch();
        },
        loadData(){
            this.$refs.commonList.loadData();
        },
        getScrollTop(){
            return this.$refs.commonList.getScrollTop();
        },
        setScrollTop(top){
            this.$refs.commonList.setScrollTop(top);
        },
        initData(){
            this.$refs.commonList.initData();
        },
        setParams(params){
            
            this.sKey="";
            this.sKey2="";
            this.company="";
            this.searchs="";
            if(params.sKey){
                this.sKey=params.sKey;
            }
            if(params.sKey2){
                this.sKey2=params.sKey2;
            } 
            if(params.company){
                this.company=params.company;
            }
            if(params.searchs){
                this.searchs=params.searchs;
            }
            this.$refs.commonList.loadDataChild(this.sKey,this.sKey2,this.company,this.searchs,"")
        },
        countJson(data){
            this.$emit("countJson",data);
        },
        rowDbClick(data){
            //alert(this.dbModelkey)
            let rows=JSON.parse(data);
            if(rows.dbModelkey&&!this.dbModelkey){
                this.dbModelkey=rows.dbModelkey;
            }
           
            if(this.dbModelkey){
                this.$post("api","api/view/getDbUrl",{key:escape(this.dbModelkey)}).then(data=>{
                    let name=data.name;
                    let sId=rows[data.fieldKey];
                    let url=data.url;
                    let field=data.field;
                    let filename=data.filename;
                    let param="sId="+sId+"&appid="+this.appid+"&filename2="+filename+"&fieldPath="+field;
                    url=url.indexOf("?")==-1 ? url+"?"+param:url+"&"+param;
                    let item={};
                    item.buttonName=name;
                    item.url=url;
                    item.sId=sId;
                    item.appid=this.appid;
                    item.filename2=filename;
                    item.fieldPath=field;
                    this.openWin(JSON.stringify(item))
                })
            }
        },
        setComonListData(commonListData){
            this.commonListData=commonListData;
            if(this.commonListData){
                if(this.commonListData.sKey){
                    this.sKey=this.commonListData.sKey;
                }
                if(this.commonListData.sKey2){
                    this.sKey2=this.commonListData.sKey2;
                } 
                if(this.commonListData.exId){
                    this.exId=this.commonListData.exId;
                } 
                if(this.commonListData.company){
                    this.company=this.commonListData.company;
                }
                if(this.commonListData.searchs){
                    this.searchs=this.commonListData.searchs;
                }
                if(this.commonListData.isApp){
                    this.isApp=this.commonListData.isApp;
                }
                if(this.commonListData.appid){
                    this.appid=this.commonListData.appid;
                }
                if(this.commonListData.title){
                    this.title=this.commonListData.title;
                }
                if(this.commonListData.model){
                    this.model=this.commonListData.model;
                }
                
                if(this.commonListData.dbModelkey){
                    this.dbModelkey=this.commonListData.dbModelkey;
                }
                if(this.commonListData.key){
                    this.key=this.commonListData.key;
                }
            }
            this.$refs.commonList.setSearchs(this.searchs)
               
        },

        setComonListSearch(searchs){
            this.searchs=searchs;
            this.$refs.commonList.setSearchs2(this.searchs)
               
        }
    }
    
}
</script>
<style scoped>
    .list{
        height:100%;
        width:100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding:0;
        padding-top:0;
    }
    .list_dev{
        height:100%;
        width:100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding:0;
        padding-top:0;
        display:flex;
        flex-direction:row;
    }
    .commonList{
        flex:1;
    }
    .dialogClass{
        display:flex;
        flex-direction: column;
        overflow: hidden;
    }

    .dialogClass>>>.el-dialog{
        width:100%;
        flex:1;
        overflow:hidden !important;
        position:absolute !important;
        height:100%;
        display:flex;
        /*flex:1;
        overflow: hidden;
        height:100%;*/
    }
    .dialogClass>>>.el-dialog__body{
        overflow:hidden !important;
        flex:1;
    }
    
</style>
